<template>
  <div id="selectionlist" class="necessary">
    <el-dialog title="补录领导批示" :visible.sync="leaderApproveVisible" width="80%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <leaderApprove v-bind:personId='personId' :step='2' :szData="selectData.szData" @closeDialog="closeAndRefresh"></leaderApprove>
    </el-dialog>
    <el-dialog title="设置凡提四必经办人" :visible.sync="settingVisible" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
      <necessarysetting @closeDialog="settingVisible=false" :timestamp="timestamp"></necessarysetting>
    </el-dialog>
    <el-dialog title="批示意见/办理提示" :visible.sync="noticeVisible" width="95%">
      <notice :noticePersonId="noticePersonId" :step="2" :timestamp="timestamp" @refresh="refresh"></notice>
      <div slot="footer" class="dialog-footer" style="overflow:hidden">
        <el-button @click.native="noticeVisible = false" style="float:right">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="批示意见/办理提示" :visible.sync="noticeVisible1" width="95%">
      <notice :noticePersonId="noticePersonId" :step="1" :timestamp="timestamp" @refresh="refresh"></notice>
      <div slot="footer" class="dialog-footer" style="overflow:hidden">
        <el-button @click.native="noticeVisible1 = false" style="float:right">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="办理情况" :visible.sync="detailVisible" width="1100px" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <detail :substep="tabitem" :personid='editpersonid'></detail>
      <div slot="footer" class="dialog-footer" style="overflow:hidden">
        <el-button @click.native="detailVisible = false" style="float:right">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="resultTitle" :visible.sync="resultVisible" width="840px" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-input type="text" v-model="result" style="width:800px;"></el-input>
      <div slot="footer" class="dialog-footer" style="overflow:hidden">
        <el-button @click.native="resultVisible = false" style="float:right">取消</el-button>
        <el-button @click.native="saveResultToList" style="float:right;margin-right:20px;" type="primary">确定</el-button>
      </div>
    </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection' }">干部选任</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection/necessary/list' }">凡提四必</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxnoborder">
      <div :style="'height:'+tableHeight+'px;position:relative'">
        <el-scrollbar style="height: calc(100% + 16px);">
          <el-tooltip content="设置凡提四必经办人" placement="left" :open-delay="600">
            <el-button type="success" @click="setting" icon="el-icon-setting" style="position:absolute;right:15px;top:10px;z-index:1000" circle></el-button>
          </el-tooltip>
          <el-tabs v-model="status" type="card" @tab-click="handleClick" style="width: calc(100% - 30px);margin:15px 15px 0">
            <el-tab-pane label="本人待办" name="待分配任务">
              <span slot="label" v-if="num1_all>0" class="pointtab"><el-badge :value="num1_all" class="item">本人待办</el-badge></span>
              <el-radio-group v-model="tabdept" @change="changedept" style="margin:0 0 15px" class="pointRadio">
                <el-radio-button label="干部一处事项">
                  <el-badge v-if="num1_1>0" :value="num1_1" class="item">干部一处事项</el-badge>
                </el-radio-button>
                <el-radio-button label="干部二处事项">
                  <el-badge v-if="num1_2>0" :value="num1_2" class="item">干部二处事项</el-badge>
                </el-radio-button>
                <el-radio-button label="干部三处事项">
                  <el-badge v-if="num1_3>0" :value="num1_3" class="item">干部三处事项</el-badge>
                </el-radio-button>
              </el-radio-group>
              <el-table :data="personlist" highlight-current-row v-loading="listLoading" style="width: 100%; margin-bottom:15px" border @selection-change="handleSelectionChange">
                <el-table-column type="selection"  width="50">
                </el-table-column>
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="realName" label="姓名">
                </el-table-column>
                <el-table-column label="是否已交监督处处理" width="100">
                  <template slot-scope="scope">
                    {{scope.row.step1ApproveFlag?'是':'否'}}
                  </template>
                </el-table-column>
                <el-table-column label="批示意见/办理提示" width="140">
                  <template slot-scope="scope">
                    <el-popover placement="bottom" width="600" trigger="hover">
                      <notice :noticePersonId="scope.row.personId" step="1" :timestamp="timestamp" @refresh="refresh"></notice>
                      <el-button size="small" slot="reference" type="primary" @click="showNotice1(scope.row.personId)">查看详情</el-button>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="凡提四必">
                  <el-table-column label="查核干部档案" width="250">
                    <template slot-scope="scope">
                      <i v-if="scope.row.stateCadreArchives===-1" class="icon_c_-1"></i>
                      <el-checkbox v-else v-show="scope.row.stepStates[0]===0" v-model="scope.row.stateCadreArchives1"></el-checkbox>
                    </template>
                  </el-table-column>
                  <el-table-column prop="jobName" label="查核有关事项" width="250">
                    <template slot-scope="scope">
                      <i v-if="scope.row.statePersonalMatters===-1" class="icon_c_-1"></i>
                      <el-checkbox v-else v-show="scope.row.stepStates[1]===0" v-model="scope.row.statePersonalMatters1"></el-checkbox>
                    </template>
                  </el-table-column>
                  <el-table-column prop="jobLevel" label="征求纪检监察部门意见" width="250">
                    <template slot-scope="scope">
                      <i v-if="scope.row.stateSolicitingOpinions===-1" class="icon_c_-1"></i>
                      <el-checkbox v-else v-show="scope.row.stepStates[2]===0" v-model="scope.row.stateSolicitingOpinions1"></el-checkbox>
                    </template>
                  </el-table-column>
                  <el-table-column prop="jobLevel" label="线索举报调查" width="250">
                    <template slot-scope="scope">
                      <i v-if="scope.row.stateClueReporting===-1" class="icon_c_-1"></i>
                      <el-checkbox v-else v-show="scope.row.stepStates[3]===0" v-model="scope.row.stateClueReporting1"></el-checkbox>
                    </template>
                  </el-table-column>
                </el-table-column>
                <!-- <el-table-column label="操作" width="300">
                  <template slot-scope="scope">
                    <el-button @click="sendtodo(scope.row)" type="primary" :loading="btnloading1">发送经办人</el-button>
                    <el-button @click="backtodept(scope.row.busCandidatePersonId)" type="danger" :loading="btnloading2">退回干部处</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
              办理提示 <el-autocomplete :trigger-on-focus="false" :fetch-suggestions="querySearch" v-model="opinion" style="width:80%" :maxlength="200"></el-autocomplete>
              <el-popover
                placement="top"
                width="300"
                trigger="click"
                v-model="visible">
                <div class="pop-item" v-for="(item, index) of opinions" :key="index" @click="opinion = item ; visible = !visible">{{item}}</div>
                <el-button type="primary" slot="reference" v-show="opinions&&opinions.length>0">常用用语库</el-button>
              </el-popover>
              <div style="clear:both;height:10px;"></div>
              <el-button @click="sendtodo()" type="primary" :loading="btnloading1">将所选人选的选中环节发送经办人办理</el-button>
              <el-button @click="backtodept()" type="danger" :loading="btnloading2">将所选人选的选中环节设为无需办理</el-button>
            </el-tab-pane>
            <el-tab-pane label="经办人员正在办理" name="经办人员办理中">
              <span slot="label" v-if="num2_all>0" class="pointtab"><el-badge :value="num2_all" class="item">经办人员正在办理</el-badge></span>
              <el-radio-group v-model="tabdept" @change="changedept" style="margin:0 0 15px" class="pointRadio">
                <el-radio-button label="干部一处事项">
                  <el-badge v-if="num2_1>0" :value="num2_1" class="item">干部一处事项</el-badge>
                </el-radio-button>
                <el-radio-button label="干部二处事项">
                  <el-badge v-if="num2_2>0" :value="num2_2" class="item">干部二处事项</el-badge>
                </el-radio-button>
                <el-radio-button label="干部三处事项">
                  <el-badge v-if="num2_3>0" :value="num2_3" class="item">干部三处事项</el-badge>
                </el-radio-button>
              </el-radio-group>
              <el-table :data="personlist1" highlight-current-row v-loading="listLoading" style="width: 100%; margin-bottom:15px" border @selection-change="handleSelectionChange">
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="realName" label="姓名">
                </el-table-column>
                <el-table-column label="凡提四必">
                  <el-table-column label="查核干部档案" width="250">
                    <template slot-scope="scope">
                      <el-tooltip v-if="scope.row.stateCadreArchives===2" :content="scope.row.resultCadreArchives" placement="top">
                        <i class="icon_c_3a"></i>
                      </el-tooltip>
                      <i v-else :class="'icon_c_'+scope.row.stateCadreArchives"></i>
                    </template>
                  </el-table-column>
                  <el-table-column label="查核有关事项" width="250">
                    <template slot-scope="scope">
                      <i :class="'icon_c_'+scope.row.statePersonalMatters"></i>
                    </template>
                  </el-table-column>
                  <el-table-column label="征求纪检监察部门意见" width="250">
                    <template slot-scope="scope">
                      <!-- <i class="icon_c_1" @click="showdetail(scope.row.id)"></i> -->
                      <i :class="'icon_c_'+scope.row.stateSolicitingOpinions"></i>
                    </template>
                  </el-table-column>
                  <el-table-column label="线索举报调查" width="250">
                    <template slot-scope="scope">
                      <i :class="'icon_c_'+scope.row.stateClueReporting"></i>
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="经办人员已办理" name="经办人已报处长">
              <span slot="label" v-if="num3_all>0" class="pointtab"><el-badge :value="num3_all" class="item">经办人员已办理</el-badge></span>
              <el-radio-group v-model="tabdept" @change="changedept" style="margin:0 0 15px" class="pointRadio">
                <el-radio-button label="干部一处事项">
                  <el-badge v-if="num3_1>0" :value="num3_1" class="item">干部一处事项</el-badge>
                </el-radio-button>
                <el-radio-button label="干部二处事项">
                  <el-badge v-if="num3_2>0" :value="num3_2" class="item">干部二处事项</el-badge>
                </el-radio-button>
                <el-radio-button label="干部三处事项">
                  <el-badge v-if="num3_3>0" :value="num3_3" class="item">干部三处事项</el-badge>
                </el-radio-button>
              </el-radio-group>
              <el-table :data="personlist2" highlight-current-row v-loading="listLoading" style="width: 100%; margin-bottom:15px" border @selection-change="handleSelectionChange">
                <el-table-column type="selection"  width="50">
                </el-table-column>
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="realName" label="姓名">
                </el-table-column>
                <el-table-column label="凡提四必">
                  <el-table-column label="查核干部档案" width="250" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <i v-show="scope.row.stateCadreArchives===-1" class="icon_c_-1"></i>
                      <el-button v-show="scope.row.stateCadreArchives!==-1" type="text" @click="showResult(scope.row.id,1)" icon="el-icon-edit" title="编辑结论"></el-button>
                      <el-button v-show="scope.row.stateCadreArchives!==-1" type="text" @click="showdetail(scope.row.id,1)" icon="el-icon-search" title="查看详情"></el-button>
                      {{scope.row.resultCadreArchives}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="jobName" label="查核有关事项" width="250" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <i v-show="scope.row.statePersonalMatters===-1" class="icon_c_-1"></i>
                      <el-button v-show="scope.row.statePersonalMatters!==-1" type="text" @click="showResult(scope.row.id,2)" icon="el-icon-edit" title="编辑结论"></el-button>
                      <el-button v-show="scope.row.statePersonalMatters!==-1" type="text" @click="showdetail(scope.row.id,2)" icon="el-icon-search" title="查看详情"></el-button>
                      {{scope.row.resultPersonalMatters}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="jobLevel" label="征求纪检监察部门意见" width="250" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <i v-show="scope.row.stateSolicitingOpinions===-1" class="icon_c_-1"></i>
                      <el-button v-show="scope.row.stateSolicitingOpinions!==-1" type="text" @click="showResult(scope.row.id,3)" icon="el-icon-edit" title="编辑结论"></el-button>
                      <el-button v-show="scope.row.stateSolicitingOpinions!==-1" type="text" @click="showdetail(scope.row.id,3)" icon="el-icon-search" title="查看详情"></el-button>
                      {{scope.row.resultSolicitingOpinions}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="jobLevel" label="线索举报调查" width="250" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <i v-show="scope.row.stateClueReporting===-1" class="icon_c_-1"></i>
                      <el-button v-show="scope.row.stateClueReporting!==-1" type="text" @click="showResult(scope.row.id,4)" icon="el-icon-edit" title="编辑结论"></el-button>
                      <el-button v-show="scope.row.stateClueReporting!==-1" type="text" @click="showdetail(scope.row.id,4)" icon="el-icon-search" title="查看详情"></el-button>
                      {{scope.row.resultClueReporting}}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="是否进行后续工作" width="140">
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.isAffected" @change="changeThisRadio">
                      <el-radio :label="0">是</el-radio>
                      <el-radio :label="1">否</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button @click="addLeaderApprove(scope.row.id)">补录领导批示</el-button>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button @click="sendtodo(scope.row)" type="primary" :loading="btnloading1">重新发送经办人</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
              <SelectGroupNecessary :backflag="false" :selectData="selectData" :selectPerson="selectPerson" @getList="changetabs"></SelectGroupNecessary>
            </el-tab-pane>
            <el-tab-pane label="已退回" name="已退回">
              <span slot="label" v-if="num4_all>0" class="pointtab"><el-badge :value="num4_all" class="item">已退回</el-badge></span>
              <el-radio-group v-model="tabdept" @change="changedept" style="margin:0 0 15px" class="pointRadio">
                <el-radio-button label="干部一处事项">
                  <el-badge v-if="num4_1>0" :value="num4_1" class="item">干部一处事项</el-badge>
                </el-radio-button>
                <el-radio-button label="干部二处事项">
                  <el-badge v-if="num4_2>0" :value="num4_2" class="item">干部二处事项</el-badge>
                </el-radio-button>
                <el-radio-button label="干部三处事项">
                  <el-badge v-if="num4_3>0" :value="num4_3" class="item">干部三处事项</el-badge>
                </el-radio-button>
              </el-radio-group>
              <el-table :data="personlist3" highlight-current-row v-loading="listLoading" style="width: 100%; margin-bottom:15px" border @selection-change="handleSelectionChange">
                <el-table-column type="selection"  width="50">
                </el-table-column>
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="realName" label="姓名">
                </el-table-column>
                <el-table-column label="凡提四必">
                  <el-table-column label="查核干部档案" width="165" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <i v-show="scope.row.stateCadreArchives===-1" class="icon_c_-1"></i>
                      <el-button v-show="scope.row.stateCadreArchives!==-1" type="text" @click="showResult3(scope.row.busCandidatePersonId,1)" icon="el-icon-edit" title="编辑结论"></el-button>
                      <el-button v-show="scope.row.stateCadreArchives!==-1" type="text" @click="showdetail(scope.row.busCandidatePersonId,1)" icon="el-icon-search" title="查看详情"></el-button>
                      {{scope.row.resultCadreArchives}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="jobName" label="查核有关事项" width="165" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <i v-show="scope.row.statePersonalMatters===-1" class="icon_c_-1"></i>
                      <el-button v-show="scope.row.statePersonalMatters!==-1" type="text" @click="showResult3(scope.row.busCandidatePersonId,2)" icon="el-icon-edit" title="编辑结论"></el-button>
                      <el-button v-show="scope.row.statePersonalMatters!==-1" type="text" @click="showdetail(scope.row.busCandidatePersonId,2)" icon="el-icon-search" title="查看详情"></el-button>
                      {{scope.row.resultPersonalMatters}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="jobLevel" label="征求纪检监察部门意见" width="175" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <i v-show="scope.row.stateSolicitingOpinions===-1" class="icon_c_-1"></i>
                      <el-button v-show="scope.row.stateSolicitingOpinions!==-1" type="text" @click="showResult3(scope.row.busCandidatePersonId,3)" icon="el-icon-edit" title="编辑结论"></el-button>
                      <el-button v-show="scope.row.stateSolicitingOpinions!==-1" type="text" @click="showdetail(scope.row.busCandidatePersonId,3)" icon="el-icon-search" title="查看详情"></el-button>
                      {{scope.row.resultSolicitingOpinions}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="jobLevel" label="线索举报调查" width="165" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <i v-show="scope.row.stateClueReporting===-1" class="icon_c_-1"></i>
                      <el-button v-show="scope.row.stateClueReporting!==-1" type="text" @click="showResult3(scope.row.busCandidatePersonId,4)" icon="el-icon-edit" title="编辑结论"></el-button>
                      <el-button v-show="scope.row.stateClueReporting!==-1" type="text" @click="showdetail(scope.row.busCandidatePersonId,4)" icon="el-icon-search" title="查看详情"></el-button>
                      {{scope.row.resultClueReporting}}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="是否进行后续工作" width="140">
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.isAffected" @change="changeThisRadio">
                      <el-radio :label="0">是</el-radio>
                      <el-radio :label="1">否</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column label="批示意见/办理提示" width="160">
                  <template slot-scope="scope">
                    <el-popover placement="bottom" width="600" trigger="hover">
                      <notice :noticePersonId="scope.row.busCandidatePersonId" step="2" :timestamp="timestamp" @refresh="refresh"></notice>
                      <el-button size="small" slot="reference" type="primary" @click="showNotice(scope.row.busCandidatePersonId)">查看详情</el-button>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="330">
                  <template slot-scope="scope">
                    <el-button @click="sendbacktodo(scope.row)" type="primary" :loading="btnloading1">重新发送经办人</el-button>
                    <el-button @click="addLeaderApprove(scope.row.busCandidatePersonId)">补录领导批示</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <SelectGroupNecessary :backflag="false" :selectData="selectData" :selectPerson="selectPerson" @getList="changetabs"></SelectGroupNecessary>
            </el-tab-pane>
          </el-tabs>
        </el-scrollbar>
      </div>
    </section>
  </div>
</template>

<script>
import notice from '../common/Notice'
import SelectGroupNecessary from '../common/SelectGroupNecessary'
import SelectGroup from '../common/SelectGroup'
import detail from './common/detail'
import necessarysetting from '../common/necessarysetting'
import leaderApprove from '../common/leaderApprove'
export default {
  components: {
    notice,
    SelectGroupNecessary,
    SelectGroup,
    detail,
    necessarysetting,
    leaderApprove
  },
  data () {
    return {
      timestamp: '',
      personId: '',
      leaderApproveVisible: false,
      opinions: [],
      visible: false,
      opinion: '',
      btnloading1: false,
      btnloading2: false,
      tabitem: 1,
      editpersonid: '',
      result: '',
      noticeTit: '办理提示',
      noticeData: [],
      noticeTit2: '批示意见',
      noticeData2: [],
      resultTitle: '结论',
      resultVisible: false,
      noticeVisible: false,
      noticeVisible1: false,
      detailVisible: false,
      tabdept: '干部一处事项',
      dongyipersonlist: [],
      status: '待分配任务',
      personlist: [],
      personlist1: [],
      personlist2: [],
      personlist3: [],
      selectPerson: [],
      listLoading: false,
      tableHeight: 100,
      selectData: {
        hjData: [
        ],
        szData: [
        ],
        yyData: [],
        noticeVisible: false
      },
      noticePersonId: 0,
      resultpersonid: 0,
      resultstep: 0,
      resultList: 2,
      settingVisible: false,
      num1_all: 0,
      num2_all: 0,
      num3_all: 0,
      num4_all: 0,
      num1_1: 0,
      num1_2: 0,
      num1_3: 0,
      num2_1: 0,
      num2_2: 0,
      num2_3: 0,
      num3_1: 0,
      num3_2: 0,
      num3_3: 0,
      num4_1: 0,
      num4_2: 0,
      num4_3: 0
    }
  },
  methods: {
    changeThisRadio (val) {
      if (val === 1) {
        this.$message({
          message: '此操作将终止改人选选任工作',
          type: 'warning'
        })
      }
    },
    refresh () {
      this.timestamp = new Date().getTime()
      this.getListbystate(2)
      this.getApproveList()
    },
    closeAndRefresh () {
      this.timestamp = new Date().getTime()
      this.leaderApproveVisible = false
      this.getListbystate(2)
      this.getApproveList()
    },
    addLeaderApprove (id) {
      this.leaderApproveVisible = true
      this.personId = id
    },
    showNotice (id) {
      this.timestamp = new Date().getTime()
      console.log('show notice id:', id)
      this.noticePersonId = id
      this.noticeVisible = true
    },
    showNotice1 (id) {
      this.timestamp = new Date().getTime()
      console.log('show notice id:', id)
      this.noticePersonId = id
      this.noticeVisible1 = true
    },
    getOpinion () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/home/getCommonlyOpinions?step=1`)
        .then(response => {
          if (response.data.success) {
            this.opinions = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    querySearch (queryString, cb) {
      return this.getNotice(this, queryString, cb)
    },
    getNotice (self, queryString, cb) {
      let para = {
        key: queryString
      }
      self.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/home/getMatchedOpinions`, para)
        .then(function (response) {
          console.log('获取成功')
          var results = response.data.result
          let newArr = []
          results.forEach(function (item) {
            let obj = {'value': item}
            newArr.push(obj)
          })
          cb(newArr)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    loadSelectData () {
      this.selectData.hjData = []
      this.selectData.szData = []
      this.selectData.yyData = []
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/auth/getUsersByRole?roletype=1`)
        .then(response => {
          if (response.data.success) {
            this.selectData.hjData = []
            for (let i = 0; i < response.data.result.length; i++) {
              if (response.data.result[i].unitName + '事项' === this.tabdept) {
                this.selectData.hjData.push(response.data.result[i])
              }
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/auth/getUsersByRole?roletype=2`)
        .then(response => {
          if (response.data.success) {
            this.selectData.szData = []
            for (let i = 0; i < response.data.result.length; i++) {
              if (response.data.result[i].roleName === 'ROLE_sizhang' || response.data.result[i].manageDep.indexOf(this.tabdept) > -1 || response.data.result[i].manageDep.indexOf('干部监督处') > -1) {
                this.selectData.szData.push(response.data.result[i])
              }
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/home/getCommonlyOpinions?step=2`)
        .then(response => {
          if (response.data.success) {
            this.selectData.yyData = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    setting () {
      this.timestamp = new Date().getTime()
      this.settingVisible = true
    },
    sendbacktodo (row) {
      // if (this.selectPerson.length > 0) {
      // 发送经办人，发送成功后需要更新该流程状态
      let para = {}
      // 批量发送
      let persons = []
      // for (let i = 0; i < this.selectPerson.length; i++) {
      let substeps = []
      if (row.stateCadreArchives === 2) {
        substeps.push(21)
      }
      if (row.statePersonalMatters === 2) {
        substeps.push(22)
      }
      if (row.stateSolicitingOpinions === 2) {
        substeps.push(23)
      }
      if (row.stateClueReporting === 2) {
        substeps.push(24)
      }
      if (substeps.length === 0) {
        this.$message({
          message: '所选人选未选择任何凡提四必子环节',
          type: 'error'
        })
        return
      }
      persons.push(
        {
          personId: row.personId,
          subSteps: substeps
        }
      )
      // }
      para = {persons: persons, opinion: this.opinion}
      console.log(JSON.stringify(para))
      this.btnloading1 = true
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/necessary/sub/batchDownNoApprove`, para)
        .then(response => {
          this.btnloading1 = false
          if (response.data.success) {
            this.$message({
              message: '发送成功',
              type: 'success'
            })
            this.FormLoading = false
            this.getList()
            this.getListbystate(2)
            this.getApproveList()
          } else {
            this.$message({
              message: '发送失败:' + response.data.message,
              type: 'error'
            })
            this.FormLoading = false
          }
        })
        .catch(error => {
          this.btnloading1 = false
          this.$message({
            message: '网络发送失败:' + error,
            type: 'error'
          })
          this.FormLoading = false
        })
      // } else {
      //   this.$message({
      //     message: '请至少选择一个人选',
      //     type: 'error'
      //   })
      // }
    },
    sendtodo () {
      if (this.selectPerson.length > 0) {
      // 发送经办人，发送成功后需要更新该流程状态
        let para = {}
        // 批量发送
        let persons = []
        for (let i = 0; i < this.selectPerson.length; i++) {
          let substeps = []
          if (this.selectPerson[i].stateCadreArchives1 && this.selectPerson[i].stepStates[0] === 0) {
            substeps.push(21)
          }
          if (this.selectPerson[i].statePersonalMatters1 && this.selectPerson[i].stepStates[1] === 0) {
            substeps.push(22)
          }
          if (this.selectPerson[i].stateSolicitingOpinions1 && this.selectPerson[i].stepStates[2] === 0) {
            substeps.push(23)
          }
          if (this.selectPerson[i].stateClueReporting1 && this.selectPerson[i].stepStates[3] === 0) {
            substeps.push(24)
          }
          if (substeps.length === 0) {
            this.$message({
              message: '所选人选未选择任何凡提四必子环节',
              type: 'error'
            })
            return
          }
          persons.push(
            {
              personId: this.selectPerson[i].personId,
              subSteps: substeps
            }
          )
        }
        para = {persons: persons, opinion: this.opinion}
        console.log(JSON.stringify(para))
        this.btnloading1 = true
        this.$http
          .post(this.$http.defaults.selectionAPI + `api/selection/necessary/sub/batchDown`, para)
          .then(response => {
            this.btnloading1 = false
            if (response.data.success) {
              this.$message({
                message: '发送成功',
                type: 'success'
              })
              this.FormLoading = false
              this.getList()
              this.getListbystate(2)
              this.getApproveList()
            } else {
              this.$message({
                message: '发送失败:' + response.data.message,
                type: 'error'
              })
              this.FormLoading = false
            }
          })
          .catch(error => {
            this.btnloading1 = false
            this.$message({
              message: '网络发送失败:' + error,
              type: 'error'
            })
            this.FormLoading = false
          })
      } else {
        this.$message({
          message: '请至少选择一个人选',
          type: 'error'
        })
      }
    },
    backtodept () {
      // 退回干部处，退回成功后需要更新该流程状态
      if (this.selectPerson.length > 0) {
        let persons = []
        for (let i = 0; i < this.selectPerson.length; i++) {
          let substeps = []
          if (this.selectPerson[i].stateCadreArchives1 && this.selectPerson[i].stepStates[0] === 0) {
            substeps.push(21)
          }
          if (this.selectPerson[i].statePersonalMatters1 && this.selectPerson[i].stepStates[1] === 0) {
            substeps.push(22)
          }
          if (this.selectPerson[i].stateSolicitingOpinions1 && this.selectPerson[i].stepStates[2] === 0) {
            substeps.push(23)
          }
          if (this.selectPerson[i].stateClueReporting1 && this.selectPerson[i].stepStates[3] === 0) {
            substeps.push(24)
          }
          if (substeps.length === 0) {
            this.$message({
              message: '所选人选未选择任何凡提四必子环节',
              type: 'error'
            })
            return
          }
          persons.push(
            {
              personId: this.selectPerson[i].personId,
              subSteps: substeps
            }
          )
        }
        let para = {persons: persons}
        this.btnloading2 = true
        this.$http
          .post(this.$http.defaults.selectionAPI + `api/selection/necessary/sub/updateSkipSteps`, para)
          .then(response => {
            this.btnloading2 = false
            if (response.data.success) {
              this.$message({
                message: '退回成功',
                type: 'success'
              })
              this.getList()
            } else {
              this.$message({
                message: '退回失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            this.btnloading2 = false
            this.$message({
              message: '网络退回失败:' + error,
              type: 'error'
            })
          })
      } else {
        this.$message({
          message: '请至少选择一个人选',
          type: 'error'
        })
      }
    },
    changedept () {
      this.loadSelectData()
      this.changetabs()
    },
    handleClick () {
      this.changetabs()
    },
    changetabs () {
      if (this.status === '待分配任务') {
        this.getList()
      }
      if (this.status === '经办人员办理中') {
        this.getListbystate(1)
      }
      if (this.status === '经办人已报处长') {
        this.getListbystate(2)
      }
      if (this.status === '已退回') {
        this.getApproveList()
      }
      this.getNums()
    },
    showdetail (id, itemid) {
      this.tabitem = itemid
      this.editpersonid = id
      this.detailVisible = true
      console.log('this.tabitem')
      console.log(this.tabitem)
    },
    showResult (id, step) {
      this.resultVisible = true
      this.resultpersonid = id
      this.resultstep = step
      this.resultList = 2
      for (let i = 0; i < this.personlist2.length; i++) {
        if (this.personlist2[i].id === id) {
          if (step === 1) {
            this.result = this.personlist2[i].resultCadreArchives
          }
          if (step === 2) {
            this.result = this.personlist2[i].resultPersonalMatters
          }
          if (step === 3) {
            this.result = this.personlist2[i].resultSolicitingOpinions
          }
          if (step === 4) {
            this.result = this.personlist2[i].resultClueReporting
          }
        }
      }
    },
    saveResultToList () {
      this.resultVisible = false
      let arr = []
      if (this.resultList === 2) {
        arr = this.personlist2
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].id === this.resultpersonid) {
            if (this.resultstep === 1) {
              arr[i].resultCadreArchives = this.result
            }
            if (this.resultstep === 2) {
              arr[i].resultPersonalMatters = this.result
            }
            if (this.resultstep === 3) {
              arr[i].resultSolicitingOpinions = this.result
            }
            if (this.resultstep === 4) {
              arr[i].resultClueReporting = this.result
            }
          }
        }
      }
      if (this.resultList === 3) {
        arr = this.personlist3
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].busCandidatePersonId === this.resultpersonid) {
            if (this.resultstep === 1) {
              arr[i].resultCadreArchives = this.result
            }
            if (this.resultstep === 2) {
              arr[i].resultPersonalMatters = this.result
            }
            if (this.resultstep === 3) {
              arr[i].resultSolicitingOpinions = this.result
            }
            if (this.resultstep === 4) {
              arr[i].resultClueReporting = this.result
            }
          }
        }
      }
    },
    showResult3 (id, step) {
      this.resultVisible = true
      this.resultpersonid = id
      this.resultList = 3
      this.resultstep = step
      for (let i = 0; i < this.personlist3.length; i++) {
        if (this.personlist3[i].busCandidatePersonId === id) {
          if (step === 1) {
            this.result = this.personlist3[i].resultCadreArchives
          }
          if (step === 2) {
            this.result = this.personlist3[i].resultPersonalMatters
          }
          if (step === 3) {
            this.result = this.personlist3[i].resultSolicitingOpinions
          }
          if (step === 4) {
            this.result = this.personlist3[i].resultClueReporting
          }
        }
      }
    },
    handleSelectionChange (val) {
      this.selectPerson = val
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 165
      })
    },
    getList () {
      this.getNums()
      // 分处室获取待下发人选
      let departmentCode = 0
      if (this.tabdept === '干部一处事项') {
        departmentCode = 1
      }
      if (this.tabdept === '干部二处事项') {
        departmentCode = 2
      }
      if (this.tabdept === '干部三处事项') {
        departmentCode = 3
      }
      var _this = this
      this.listLoading = true
      let para = {
        departmentCode: departmentCode
      }
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/necessary/sub/getUserApproveList`, para)
        .then(function (response) {
          _this.listLoading = false
          if (response.data.success) {
            _this.personlist = []
            let person = {}
            for (let i = 0; i < response.data.result.length; i++) {
              console.log()
              person = response.data.result[i]
              console.log(JSON.stringify(person))
              if (person.stateCadreArchives !== -1) {
                person.stateCadreArchives1 = true
              }
              if (person.statePersonalMatters !== -1) {
                person.statePersonalMatters1 = true
              }
              if (person.stateSolicitingOpinions !== -1) {
                person.stateSolicitingOpinions1 = true
              }
              if (person.stateClueReporting !== -1) {
                person.stateClueReporting1 = true
              }
              if (!response.data.result[i].resultCadreArchives) {
                person.resultCadreArchives = ''
              }
              if (!response.data.result[i].resultPersonalMatters) {
                person.resultPersonalMatters = ''
              }
              if (!response.data.result[i].resultSolicitingOpinions) {
                person.resultSolicitingOpinions = ''
              }
              if (!response.data.result[i].resultClueReporting) {
                person.resultClueReporting = ''
              }
              _this.personlist.push(person)
            }
          } else {
            _this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          _this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    getListbystate (state) {
      this.getNums()
      // 分处室获取待下发人选
      let departmentCode = 0
      if (this.tabdept === '干部一处事项') {
        departmentCode = 1
      }
      if (this.tabdept === '干部二处事项') {
        departmentCode = 2
      }
      if (this.tabdept === '干部三处事项') {
        departmentCode = 3
      }
      var _this = this
      this.listLoading = true
      let para = {
        state: state,
        dept: departmentCode
      }
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/necessary/getProcessedNotApprove`, para)
        .then(function (response) {
          _this.listLoading = false
          if (response.data.success) {
            if (state === 1) {
              _this.personlist1 = response.data.result
            }
            if (state === 2) {
              _this.personlist2 = response.data.result
            }
          } else {
            _this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          _this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    getApproveList () {
      this.getNums()
      var _this = this
      let departmentCode = 0
      if (this.tabdept === '干部一处事项') {
        departmentCode = 1
      }
      if (this.tabdept === '干部二处事项') {
        departmentCode = 2
      }
      if (this.tabdept === '干部三处事项') {
        departmentCode = 3
      }
      this.listLoading = true
      let para = {
        step: 2,
        departmentCode: departmentCode
      }
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/approve/getUserApproveList`, para)
        .then(function (response) {
          _this.listLoading = false
          if (response.data.success) {
            _this.personlist3 = []
            let person = {}
            for (let i = 0; i < response.data.result.length; i++) {
              person = response.data.result[i]
              if (!response.data.result[i].resultCadreArchives) {
                person.resultCadreArchives = ''
              }
              if (!response.data.result[i].resultPersonalMatters) {
                person.resultPersonalMatters = ''
              }
              if (!response.data.result[i].resultSolicitingOpinions) {
                person.resultSolicitingOpinions = ''
              }
              if (!response.data.result[i].resultClueReporting) {
                person.resultClueReporting = ''
              }
              _this.personlist3.push(person)
            }
          } else {
            _this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          _this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
          _this.listLoading = false
        })
    },
    getNums () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/statnum/necessary/getStatNum`)
        .then(response => {
          if (response.data.success) {
            this.num1_1 = response.data.result.num1_1
            this.num1_2 = response.data.result.num1_2
            this.num1_3 = response.data.result.num1_3
            this.num1_all = this.num1_1 + this.num1_2 + this.num1_3
            this.num2_1 = response.data.result.num2_1
            this.num2_2 = response.data.result.num2_2
            this.num2_3 = response.data.result.num2_3
            this.num2_all = this.num2_1 + this.num2_2 + this.num2_3
            this.num3_1 = response.data.result.num3_1
            this.num3_2 = response.data.result.num3_2
            this.num3_3 = response.data.result.num3_3
            this.num3_all = this.num3_1 + this.num3_2 + this.num3_3
            this.num4_1 = response.data.result.num4_1
            this.num4_2 = response.data.result.num4_2
            this.num4_3 = response.data.result.num4_3
            this.num4_all = this.num4_1 + this.num4_2 + this.num4_3
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  },
  mounted () {
    this.loadSelectData()
    this.timestamp = new Date().getTime()

    let params = this.$route.params
    if (params && params.step) {
      if (params.step === 1) {
        this.status = '待分配任务'
        this.getList()
      }
      if (params.step === 2) {
        this.status = '经办人员办理中'
        this.getListbystate(1)
      }
      if (params.step === 3) {
        this.status = '经办人已报处长'
        this.getListbystate(2)
      }
      if (params.step === 4) {
        this.status = '已退回'
        this.getApproveList()
      }
    }
    this.tableresize(this)
    this.getOpinion()
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>
<style>
  #selectionlist .wboxnoborder .el-table{
    border: #95B8E7 solid 1px;
  }
  #selectionlist .wboxnoborder .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    text-align: center;
    border-right: #95B8E7 solid 1px;
    border-bottom: #95B8E7 solid 1px;
    min-height: 30px;
    line-height:30px;
  }
  #selectionlist .wboxnoborder .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体';
    text-align: center;
  }
  #selectionlist .el-table__row{
    height: 50px;
  }
.necessary .el-radio-group{
  width:100%;
}
.necessary .el-radio-button{
  width: 33%;
}
.necessary .el-radio-button__inner{
  width: 100%;
}
.necessary .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #FFF;
    background-color: #67C23A;
    border-color: #67C23A;
    -webkit-box-shadow: -1px 0 0 0 #67C23A;
    box-shadow: -1px 0 0 0 #67C23A;
}
</style>
<style scoped>
  #selectionlist .cell i {
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    float: center;
    display: block;
    margin: 0 auto;
  }
  .workflowmsg ul{
    background:#F5F7FA;
    margin:0 20px 20px;
    padding:10px 0;
  }
  .workflowmsg li{
    padding:0;
    list-style: none;
    margin-left:20px;
    line-height: 200%;
    font-size:var(--size) !important;
  }
  h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  h3{
    font-size:var(--size16) !important;
    font-weight: bolder;
    padding-left: 20px;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  #selectionlist .wboxnoborder{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    margin:0 10px;
    overflow: hidden;
  }
</style>
